import React from 'react'
import {
  StyleSheet,
  Text,
  View,
  Button, FlatList
} from 'react-native'
import toJS from 'mobx'
import Listitem from './Listitem'
import { inject, observer } from 'src/core/store'
@inject('CnodeListStore')
@observer
export default class extends React.Component {
  static navigationOptions = {
    title: ''
  }

  componentWillMount () {
    this.props.CnodeListStore.getList()
  }

  ListItem(item) {
    return (<Listitem item={item} />)
  }

  _header = () => {
    return <Text style={{height: 0}}></Text>
  }

  _footer = () => {
    return <Text style={{height: 0}}></Text>
  }

  _separator = () => {
    return <View style={{height: 1, backgroundColor: '#eee'}}/>
  }
  _onViewableItemsChanged = (info) => {
    console.log(`_onViewableItemsChanged`)
  }

  render () {
    const {navigate} = this.props.navigation
    const {data, load} = this.props.CnodeListStore.list
    // console.log(`render load`,load)
    return (
      <FlatList
        ref={(flatList) => this._flatList = flatList}
        // shouldItemUpdate={(props, nextProps) => { return props.item !== nextProps.item }}
        ListHeaderComponent={this._header}
        ListFooterComponent={this._footer}
        ItemSeparatorComponent={this._separator}
        renderItem={({item}) => <Listitem item={item} key={item.id} navigate={navigate} />}
        data={data}
        keyExtractor={(item, index) => item.id}
        onEndReachedThreshold={0.5}
        initialNumToRender={10}
        onEndReached={(info) => {
          console.log(`onEndReached`, info,load)
          this.props.CnodeListStore.getList()
        }}
        refreshing={load}
        onRefresh={(info) => {
          console.log(`onRefresh`, info)
          this.props.CnodeListStore.refresh()
        }}
        // getItemLayout={(data, index) => ({length: 200, offset: 200 * index, index})}
        onViewableItemsChanged={this._onViewableItemsChanged}
      />
    )
  }
}
